<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           *{margin:0;
    }
    body{
        background-color: rgb(243,243,243);
    }
   
    .bookShops{
        width: 1000px;
        height: 100%;
        position: relative;
        left: 50%;
        margin-left: -550px;
        margin-top: 70px;

    }
    .head{
        width: 1000px;
        height: 50px;
        margin-top: 20px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        background-color: white;
    }
    .head>span{
        font-size: 20px;
        font-family: 黑体;
        padding-left: 20px;
    }
    .book_introduce{
        width: 1000px;
        height: 320px;
        background-color: white;
    }
    .book_introduce>ul>li>img{
        width: 150px;
        height: 200px;
        border-radius: 5%;
    }
    .book_introduce>ul{
        list-style: none;
        margin-top: 20px;
        padding-inline-start:0px;
        /* margin-left: 20px; */
    }
    .book_introduce>ul>li>p{
        font-size: 15px;
        font-family: 宋体;
        margin: 5px;
        position: relative;
        left:20px;
    }
    .book_introduce>ul>li{
        height: 290px;
        width: 200px;
        /* padding: 20px; */
        /* padding-left: 40px; */
        float: left;
        margin-left: 50px;
        margin-top: 20px;
    }
    .classify{
        width: 1000px;
        height: 50px;
        margin-top: 20px;
        background-color: white;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
    }
    .classify>div>span{
        font-size: 20px;
        font-family: 黑体;
        margin-left: 40px;
        /* margin-top: 20px; */
       
    }
    #container1{
        width: 1000px;
        height: 100%;
        margin-top: 20px;
        background-color: white;
    }
    #container2{
        width: 1000px;
        height: 100%;
        margin-top: 20px;
        background-color: white;
        display: none;
    }
    #container3{
        width: 1000px;
        height: 100%;
        margin-top: 20px;
        background-color: white;
        display: none;
    }
    #container4{
        width: 1000px;
        height: 100%;
        margin-top: 20px;
        background-color: white;
        display: none;
    }
    #containerr1,#contanierr2,#contanierr3,#containerr4{
        list-style: none;
        margin-top: 20px;
        padding-inline-start:0px;
    }
    .containerLi{
        height: 290px;
        width: 200px;
        /* padding: 20px; */
        /* padding-left: 40px; */
        float: left;
        margin-left: 50px;
        margin-top: 20px;
        /* background-color: white; */
    }
    .spans{
        width: 130px;
        height: 30px;
        font-size: 14px;
        font-family: 宋体;
        margin: 5px;
        position: relative;
        left:20px;
        overflow: hidden;
       
    }
    .conainerImg{
        width: 150px;
        height: 200px;
        border-radius: 5%;
    }

    </style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function(){
        
        $.getJSON('JSON/book_1.json',function(result){
            // console.log(result[0].authors[0].name)
            var strHTML=''
            for(var i=0;i<result.length;i++){
                strHTML += `<li class="containerLi" onclick="goContent(this)">
                    <img class="conainerImg" src="${result[i].imgUrl}">
                    <p class="spans">${result[i].title}</p>
                    <p class="spans" style="font-size:12px; height: 15px;">${result[i].authors[0].name}</p>
                    <p class="spans" style="font-size:12px; height: 15px;">￥${result[i].price}</p>
                </li>`
            }
            // console.log(strHTML)
            // console.log("执行完成")
            $('#containerr1').html(strHTML)
        })

        // 2
       
        $.getJSON('JSON/book_2.json',function(result2){
            var strHTML2=''
            // console.log(result[0].authors[0].name)
            for(var i=0;i<result2.length;i++){
                strHTML2 += `<li class="containerLi" onclick="goContent(this)">
                    <img class="conainerImg" src="${result2[i].imgUrl}">
                    <p class="spans">${result2[i].title}</p>
                    <p class="spans" style="font-size:12px; height: 15px;">${result2[i].authors[0].name}</p>
                    <p class="spans" style="font-size:12px; height: 15px;">￥${result2[i].price}</p>
                </li>`
            }
            console.log(strHTML2)
            // console.log("执行完成")
            $('#contanierr2').html(strHTML2)
        })

        // 3
        
        $.getJSON('JSON/book_3.json',function(result3){
            var strHTML3=''
            // console.log(result[0].authors[0].name)
            for(var i=0;i<result3.length;i++){
                strHTML3 += `<li class="containerLi" onclick="goContent(this)">
                    <img class="conainerImg" src="${result3[i].imgUrl}">
                    <p class="spans">${result3[i].title}</p>
                    <p class="spans" style="font-size:12px; height: 15px;">${result3[i].authors[0].name}</p>
                    <p class="spans" style="font-size:12px; height: 15px;">￥${result3[i].price}</p>
                </li>`
            }
            // console.log(strHTML)
            console.log("执行完成")
            $('#contanierr3').html(strHTML3)
        })


        // 4
       
        $.getJSON('JSON/book_4.json',function(result4){
            console.log(result4)
            var strHTML4=''
            for(var i=0;i<result4.length;i++){
                strHTML4 += `<li class="containerLi" onclick="goContent(this)">
                    <img class="conainerImg" src="${result4[i].imgUrl}">
                    <p class="spans">${result4[i].title}</p>
                    <p class="spans" style="font-size:12px; height: 15px;">${result4[i].authors[0].name}</p>
                    <p class="spans" style="font-size:12px; height: 15px;">￥${result4[i].price}</p>
                </li>`
            }
            // console.log(strHTML)
            console.log("执行完成")
            $('#contanierr4').html(strHTML4)
        })

        var lis = document.querySelectorAll('li')
        for(var a=0;a<lis.length;a++){
            lis[a].onclick = function(){
                var bookInfo=[]
                console.log(this.firstElementChild.src)
                var image = this.firstElementChild.src
                var bookName = this.firstElementChild.nextElementSibling.innerHTML
                var author = this.firstElementChild.nextElementSibling.nextElementSibling.innerHTML
                var price = this.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML
                
                bookInfo.push({"bookName":bookName,"author":author,"price":price,"image":image})
                sessionStorage['bookInfo'] = JSON.stringify(bookInfo)
                location.href = "book_content.html"
            }
        }

    })

    function changeFree(){
        document.querySelector('#container2').style.display='block'
        document.querySelector('#container1').style.display='none'
        document.querySelector('#container3').style.display='none'
        document.querySelector('#container4').style.display='none'
    }
    function changePrice(){
        document.querySelector('#container2').style.display="none"
        document.querySelector('#container1').style.display="block"
        document.querySelector('#container3').style.display="none"
        document.querySelector('#container4').style.display="none"
    }
    function changetop(){
        document.querySelector('#container2').style.display="none"
        document.querySelector('#container1').style.display="none"
        document.querySelector('#container3').style.display="inline-block"
        document.querySelector('#container4').style.display="none"
    }
    function changeopen(){
        document.querySelector('#container2').style.display="none"
        document.querySelector('#container1').style.display="none"
        document.querySelector('#container3').style.display="none"
        document.querySelector('#container4').style.display="block"
    }
    function goContent(that){
        var bookInfo=[]
                console.log(that.firstElementChild.src)
                var image = that.firstElementChild.src
                var bookName = that.firstElementChild.nextElementSibling.innerHTML
                var author = that.firstElementChild.nextElementSibling.nextElementSibling.innerHTML
                var price = that.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML
                
                bookInfo.push({"bookName":bookName,"author":author,"price":price,"image":image})
                sessionStorage['bookInfo'] = JSON.stringify(bookInfo)
                location.href = "book_content.html"
    }
</script>

</head>
<body>
       <!-- 通栏 -->
    <div id="Navigation"></div>


    <!-- 内容 -->
    <div class="bookShops">
        <div class="head">
            <span>精选推荐</span>
            <span style="float: right; font-size: 18px; padding-right: 20px;">查看全部书目</span>
        </div>
        <div class=book_introduce>
           <ul>
               <li>
                   <img src="https://pic1.zhimg.com/50/v2-c70fa52c486461e7d62f8c1f30269932_200x0.webp">
                   <p>危险的维纳斯</p>
                   <p>东野圭吾</p>
                   <p>￥25.5</p>
               </li>
               <li>
                <img src="https://pic1.zhimg.com/50/v2-471bffd556983487c98b6c41880512c7_200x0.webp">
                <p>摆渡人</p>
                <p>克莱尔·麦克福尔</p>
                <p>￥25.5</p>
            </li>
            <li>
                <img src="https://pic1.zhimg.com/50/v2-9a986b2da83e3741a0506db7d4bf68e1_200x0.webp">
                <p>摆渡人2</p>
                <p>克莱尔·麦克福尔</p>
                <p>￥25.5</p>
            </li>
            <li>
                <img src="https://pic1.zhimg.com/50/v2-6ae133de3948ba17693ab75dc4a5ca2a_200x0.webp">
                <p>那不勒斯的萤火</p>
                <p>马西</p>
                <p>￥25.5</p>
            </li>
           </ul>
        </div>

        <!-- 分类模块 -->
        <div class="classify">
            <div>
                <span onclick="changePrice()">特价</span>
                <span onclick="changeFree()">免费</span>
                <span onclick="changetop()">榜单</span>
                <span onclick="changeopen()">知遇出品</span>
            </div>
        </div>
        <!-- 1 -->
        <div id="container1">
            <ul id="containerr1">
                <li class="containerLi">
                    <img class="conainerImg" src="https://pic1.zhimg.com/50/v2-c70fa52c486461e7d62f8c1f30269932_200x0.webp">
                    <p class="spans">危险的维纳斯</p>
                    <p class="spans">东野圭吾</p>
                    <p class="spans">￥25.5</p>
                </li>
            </ul>
        </div>
        <!-- 2 -->
        <div id="container2">
            <ul id="contanierr2">
                
            </ul>
        </div>
        <!-- 3 -->
        <div id="container3">
            <ul id="contanierr3">
                
            </ul>
        </div>
        <!-- 4 -->
        <div id="container4">
            <ul id="contanierr4">
                
            </ul>
        </div>
    </div>
    <script>
        $("#Navigation").load("Navigation.html");
    </script>
</body>
</html>